<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'
const fromData = ref({
  categoryone: '',
  categorytwo: '',
  categorythree: ''
})
// 是否禁用选择框
const disabledtwo = ref(true)
const disabledthree = ref(true)

// 一级分类
const categoryoneList = ref([])
// 二级分类
const categorytwoList = ref([])
// 三级分类
const categorythreeList = ref([])
const getCategoryone = async () => {
  const res = await axios.get('/api/categoryone')
  categoryoneList.value = res.data
}
getCategoryone()
const handleChangeone = async () => {
  const res = await axios.post('/api/categorytwo', {
    id: fromData.value.categoryone
  })
  categorytwoList.value = res.data
  disabledtwo.value = false
}

const handleChangetwo = async () => {
  const res = await axios.post('/api/categorythree', {
    id: fromData.value.categorytwo
  })
  categorythreeList.value = res.data
  disabledthree.value = false
}

</script>

<template>
  <el-card>
    <el-form :inline="true" :model="fromData">
      <!-- 下拉选择框 -->
      <el-form-item label="一级分类" label-width="auto">
        <el-select v-model="fromData.categoryone" placeholder="请选择" @change="handleChangeone" style="width: 200px;">
          <el-option v-for="(item, index) in categoryoneList" :key="index" :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select v-model="fromData.categorytwo" @change="handleChangetwo" placeholder="请选择" style="width: 200px;"
          :disabled="disabledtwo">
          <el-option v-for="(item, index) in categorytwoList" :key="index" :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select v-model="fromData.categorythree" placeholder="请选择" style="width: 200px;" :disabled="disabledthree">
          <el-option v-for="(item, index) in categorythreeList" :key="index" :label="item.color"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 40px;">
    <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
  </el-card>
</template>

<style scoped lang="scss"></style>